<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/libs/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/special/special_publish.css" />
		<link rel="stylesheet" type="text/css" href="../../css/special/imageview.css" />
	</head>

	<body>

		<div id="publish">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">专题发布</h1>
			</header>
			<div class="mui-content">
				<div class="publish_title">
					<div>标题：</div>
					<div><input type="text" name="" id="title" placeholder="6-20个汉字或字母" /></div>
				</div>
				<div class="publish_cls"><span val='1'>精美店铺</span><i class="mui-icon mui-icon-arrowdown"></i></div>
				<div class="textarea">
					<textarea name="" rows="5" placeholder="记录下你的想法" id="textarea"></textarea>
					<div>200字</div>
				</div>

				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3 phosGrid" v-for="pho in photos">
						<div class="phos" v-bind:style="{backgroundImage : 'url(' + pho + ')'}">
							<img class="coverImg" :src='pho' v-bind:data-preview-src="pho" data-preview-group="1" />
						</div>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3 phosGrid" v-show="photos.length<9" @tap="selectCls">
						<div class="phos addimg"></div>
					</li>
				</ul>

			</div>
			<div class="footer"><button type="button" class="mui-btn mui-btn-danger" @tap="determine">确定发布</button></div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/libs/mui.picker.min.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/libs/mui.zoom.js"></script>
		<script src="../../js/libs/mui.previewimage_cjh.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			var publish = new Vue({
				el: '#publish',
				data: {
					photos: [
						//						"https://picabstract-preview-ftn.weiyun.com:8443/ftn_pic_abs_v2/7f48ccfe0e959261cbf6f021e315f4b9cdb5de7da509f1e8e22c6dc101492ce87c0b25e795b9a85b5996d85fce8164d0?pictype=scale&from=30113&version=2.0.0.2&uin=2062896013&fname=frn_09.jpg&size=1024",
						//						"https://picabstract-preview-ftn.weiyun.com:8443/ftn_pic_abs_v2/7f48ccfe0e959261cbf6f021e315f4b9cdb5de7da509f1e8e22c6dc101492ce87c0b25e795b9a85b5996d85fce8164d0?pictype=scale&from=30113&version=2.0.0.2&uin=2062896013&fname=frn_09.jpg&size=1024",
						//						"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3588772980,2454248748&fm=27&gp=0.jpg"
					],
					filesZip: [],
				},
				methods: {
					determine: function() {
						if(common.replace($("#title").val()) == '') {
							common.toast('标题不能为空')
							return
						} else if(!$(".publish_cls span").attr('val')) {
							common.toast('请选择类型')
							return
						}
						var wt = plus.nativeUI.showWaiting();
						var task = plus.uploader.createUpload(common.urls + "/thematic/saveSub", {
								method: "POST"
							},
							function(t, status) { //上传完成
								if(status == 200) {
									console.log(JSON.parse(t.responseText).code)
									if(JSON.parse(t.responseText).code == 1) {
										wt.close();
										plus.webview.getWebviewById('../special/specialregion.html').reload()
										mui.back()
									} else {
										wt.close();
										if(JSON.parse(t.responseText).resultMsg) {
											common.toast(JSON.parse(t.responseText).resultMsg)
										}
									}
								} else {
									console.log("上传失败：" + status);
									wt.close();
								}
							});

						task.addData("title", $("#title").val());
						task.addData("tagid", $(".publish_cls span").attr('val'));
						task.addData("content", $("#textarea").val());

						task.setRequestHeader('auth', "YL " + common.data.token);
						for(var i = 0; i < publish.filesZip.length; i++) {
							var f = publish.filesZip[i];
							task.addFile(f.path, {
								key: f.name,
								mime: 'form-data'
							});
						}
						task.start();

					},
					selectCls: function() {
						var btnArray = [{
							title: "立即拍照"
						}, {
							title: "从相册选择"
						}];
						plus.nativeUI.actionSheet({
							title: "选择照片",
							cancel: "取消",
							buttons: btnArray
						}, function(e) {
							var index = e.index;
							switch(index) {
								case 1:
									getImage()
									break;
								case 2:
									galleryImg()
									break;
							}
						});
					}
				},
				watch: {
					photos: function(news, old) {
						this.filesZip = []
						console.log(news.length)
						for(var i = 0; i < news.length; i++) {
							compressImage(news[i], i)
						}

					}
				}
			})

			mui.init({
				swipeBack: true
			})
			var userPicker = new mui.PopPicker();
			userPicker.setData([{
				text: '精品店铺',
				val: '1'
			}, {
				text: '建店方案',
				val: '2'
			}, {
				text: '新闻资讯',
				val: '3'
			}, {
				text: '智慧门店',
				val: '4'
			}, {
				text: '其他',
				val: '5'
			}]);
			var publishCls = document.getElementsByClassName('publish_cls')[0];
			publishCls.addEventListener('tap', function(event) {
				userPicker.show(function(items) {
					$(".publish_cls span").text(items[0].text)
					$(".publish_cls span").attr('val', items[0].val)
					//返回 false 可以阻止选择框的关闭
					//return false;
				});
			}, false);

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				publish.photos = self.parameter;
				var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
				$(".footer").css('top', resizeHeight - 40)
			});

			mui.previewImage();
			var imgTrash = document.getElementsByClassName('img_trash')[0];
			imgTrash.addEventListener('tap', function(event) {
				if(publish.photos.length <= 1) {
					mui.toast('至少上传1张图片')
					return
				}
				var selIndex = mui.getProto().lastIndex;
				var opt = mui.getProto();
				opt.removeImage(selIndex, "1");
				publish.photos.splice(selIndex, 1)
			}, false);

			function getImage() {
				var c = plus.camera.getCamera();
				c.captureImage(function(e) {
					plus.io.resolveLocalFileSystemURL(e, function(entry) {
						var s = entry.toLocalURL()
						publish.photos.push(s)
					}, function(e) {
						console.log("读取拍照文件错误：" + e.message);
					});
				}, function(s) {
					console.log(JSON.stringify(s))
					//					common.toast('请检查该app相机授权')
				}, {
					filename: "_doc/" + new Date().getTime() + ".jpg"
				})
			}

			function galleryImg() {
				// 从相册中选择图片
				plus.gallery.pick(function(e) {
					publish.photos = publish.photos.concat(e.files)
				}, function(e) {
					common.toast('取消选择图片');
				}, {
					filter: 'image',
					multiple: true,
					maximum: 9 - Number(publish.photos.length),
					system: false,
					onmaxed: function() {
						plus.nativeUI.alert('最多只能选择' + (9 - Number(publish.photos.length)) + '张图片');
					}
				}); // 最多选择9张图片
			};

			//压缩
			function compressImage(img, index) {
				plus.zip.compressImage({
						src: img,
						dst: img.slice(0, img.length - 4) + "zip" + (img.slice(-4)),
						quality: 100,
						overwrite: true
					},
					function(i) {
						publish.filesZip.push({
							name: "files" + (index + 1),
							path: i.target
						})
					},
					function(e) {
						alert("压缩图片失败: " + JSON.stringify(e));
					});
			}
		</script>
	</body>

</html>